<!--
 * @FilePath     : /study_code/layui/15-76.html
 * @Description  : 3）动态创建 xm-select 多选；
 * @Date         : 2025-02-24 16:41
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-09 17:12:07
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <table id="form-create" class="layui-table">
      <thead>
        <tr>
          <th style="width: 50px">序号</th>
          <th>性别</th>
          <th>爱好</th>
          <th style="width: 150px">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="3">
            <span>这里呢, 演示一下动态添加多选的例子</span>
          </td>
          <td colspan="1">
            <div class="layui-btn-group">
              <button type="button" class="layui-btn add">增加</button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <script src="/jquery/jquery.min.js"></script>
    <script src="/xm-select/dist/xm-select.js"></script>
    <script>
      /*
      1、index 是全局变量；
      当前行序号；
      同时用来标识当前行的下拉选唯一；
     */
      var index = 1

      // 2、给 .add 按钮添加点击事件；（在最后位置添加新的行）
      $('.add').on('click', function () {
        /*
        2.1、element 是一段 jq 元素片段；
        最后被追加到容器 #form-create tbody 里；
        里面是当前行内容；
          td1:index 当前序号；
          td2: 性别选择；（下拉后面会渲染到这里）
          td3: 爱好选择；（下拉后面会渲染到这里）
          td4: 操作栏，含取值 和 删除按钮；
        */
        var element = $(
          [
            '<tr>',
            '<td>' + index + '</td>',
            '<td class="gender"></td>',
            '<td class="hobby"></td>',
            '<td class="handler">',
            '<button type="button" class="layui-btn layui-btn-normal get">取值</button>',
            '<button type="button" class="layui-btn layui-btn-danger del">删除</button>',
            '</td>',
            '</tr>',
          ].join('')
        )

        // 2.2、找到下面 “爱好”列元素；
        var hobby = element.find('.hobby')[0]
        /*
        2.3、渲染下拉选；
        值是根据序列号 index 动态生成的；
        */
        var hobbySelect = xmSelect.render({
          el: hobby,
          data: function () {
            return [
              { name: '篮球' + index, value: 1 },
              { name: '足球' + index, value: 2 },
              { name: '乒乓球' + index, value: 3 },
            ]
          },
        })

        /*
        2.4、同理找到 “性别” 列，渲染下拉选；
        单选；
        纯文本；
        */
        var gender = element.find('.gender')[0]
        xmSelect.render({
          el: gender,
          radio: true,
          clickClose: true,
          model: { label: { type: 'text' } },
          data: function () {
            return [
              { name: '男', value: 1 },
              { name: '女', value: 2 },
              { name: '保密', value: 3 },
            ]
          },
          on: function (data) {
            var changeItem = data.change[0]
            if (data.isAdd && changeItem.value == 3) {
              // tip: 这里 this 指向 .bind() 传入的 hobbySelect。（即指向当前下拉选实例）
              this.update({ disabled: true })
            } else {
              this.update({ disabled: false })
            }
          }.bind(hobbySelect),
        })

        // 2.5、取值按钮取的是当前行 “爱好”下拉选 value 值字符串；
        element.find('.get').on(
          'click',
          function () {
            alert('valueStr: ' + this.getValue('valueStr'))
          }.bind(hobbySelect)
        )

        // 2.6、删除按钮，删除当前行；
        element.find('.del').on('click', function () {
          $(this).parents('tr').remove()
        })

        // 2.7、事件都添加监听后，将 index自增，用于下一次点击 “新增”按钮添加行；
        index++

        // 2.8、最后将新的行添加到表格主体中；
        $('#form-create tbody').append(element)
      })
    </script>
  </body>
</html>
